<template>
    <div>
        <div class="freeCourse"><span>免费课程</span><span class="span2">更多</span>
            <svg data-v-21ab4c8b="" viewBox="64 64 896 896" data-icon="right-circle" width="1em" height="1em"
                 fill="currentColor" aria-hidden="true" focusable="false" class="">
                <path
                        d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z">
                </path>
                <path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z">
                </path>
            </svg>
        </div>
        <!--        课程内容-->
        <div class="freeContent">
            <!--            缓存区跳转-->
            <router-link :to="{path:'/Cache',query:{courseId:item.courseId}}" tag="div" class="freeContent1"
                         v-for="(item,index) in list" :key="index">
                <div class="freeContentImg"><img :src="item.bannerFileUrl" alt=""></div>
                <div>
                    <p class="p1" style="color: black">{{item.courseTitle}}</p>
                    <p class="p2">共{{item.learningNum}}节课|{{item.subSectionNum}}人报名</p>
                    <p class="p3">免费</p>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
    import {kecheng} from '../../../api/api'

    export default {
        name: "Free",
        props: {
            pageNum: {
                type: [String, Number],
            },
            type: {
                type: [String, Number],
            },
            pageSize: {
                type: [String, Number],
            },
        },
        data() {
            return {
                list: []
            }
        },

        created() {
            kecheng(this.type, this.pageNum, this.pageSize).then(
                res => {
                    console.log(res);
                    this.list = res.rows
                })
        }
    }
</script>

<style scoped>
    .freeCourse {
        width: 80%;
        height: 80px;
        border-bottom: 3px #e8e8e8 solid;
        font-size: 25px;
        text-align: center;
        line-height: 90px;
        margin-left: 10%;
    }

    .freeCourse .span2 {
        font-size: 16px;
        position: relative;
        left: 43%;
        color: #999999;
        font-size: 16px;
    }

    .freeCourse svg {
        font-size: 16px;
        position: relative;
        left: 44%;
        top: 2%;
        color: #999999;
    }

    .freeContent {
        width: 80%;
        height: 445px;
        /* border: 1px solid red; */
        margin-left: 10%;
        margin-top: 1%;
          }
    .freeContentImg{

    }
    .freeContent img {
        cursor: pointer;
        transition: all 0.6s;
    }

    .freeContent img:hover {
        transform: scale(0.9);
    }

    .freeContent1 {
        width: 225px;
        height: 215px;
        /*   border: red 1px solid; */
        float: left;
        margin-left: 1%;
        overflow: hidden;
    }

    .freeContent1 img {
        width: 100%;
        height: 122px;
    }

    .freeContent1 div .p1 {
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }

    .freeContent1 div .p2 {
        font-size: 14px;
        color: #978897;
        cursor: pointer;
    }

    .freeContent1 div .p3 {
        color: #00cf8c;
        cursor: pointer;
        font-size: 16px;
    }

    .freeContent1 div p {
        margin-top: 5px;

    }

    p {
        margin-bottom: 0.3em;
    }
</style>